<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script>
        L_NO_TOUCH = false;
        L_DISABLE_3D = false;
    </script>

    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <style>
        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
        }
    </style>

    <script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/all.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <style>
        #map_e453376ea7f4d820184acbd577b4737d {
            position: relative;
            width: 100.0%;
            height: 100.0%;
            left: 0.0%;
            top: 0.0%;
        }
        .leaflet-container {
            font-size: 1rem;
        }
    </style>

</head>
<body>
    <div class="folium-map" id="map_e453376ea7f4d820184acbd577b4737d"></div>
</body>

<script>
    var map = L.map("map_e453376ea7f4d820184acbd577b4737d", {
        center: [22.5362892, 113.9338302], // 默认初始坐标
        zoom: 16,
        zoomControl: true
    });

    var tileLayer = L.tileLayer(
        "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
        {
            minZoom: 0,
            maxZoom: 18,
            attribution: "高德地图",
            subdomains: "abc",
            opacity: 1,
        }
    ).addTo(map);

    var marker = L.marker([22.5362892, 113.9338302]).addTo(map);

    var icon = L.AwesomeMarkers.icon({
        markerColor: "red",
        iconColor: "white",
        icon: "info-sign",
        prefix: "glyphicon",
    });

    var popup = L.popup({
        maxWidth: "100%",
    });

    var htmlContent = $('<div style="width: 100.0%; height: 100.0%;">第1个位置</div>')[0];
    popup.setContent(htmlContent);

    marker.bindPopup(popup);
    marker.setIcon(icon);

    // 实时更新 GPS 数据
    function updateLocation() {
        fetch('/api/gps_data')
            .then(response => response.json())
            .then(data => {
                if (data && data.length > 0) {
                    const lastPosition = data[data.length - 1];
                    const lat = lastPosition.LBSLAT;
                    const lon = lastPosition.LBSLON;
                    marker.setLatLng([lat, lon]);
                    popup.setContent(`<div>当前位置: ${lat}, ${lon}</div>`);
                    marker.bindPopup(popup).openPopup();
                }
            });
    }

    // 每5秒钟获取一次 GPS 数据并更新位置
    setInterval(updateLocation, 30000);
    updateLocation(); // 初始加载时也调用一次
</script>

</html>
